:root {
    /* Light theme */
    font-family: 'Proza Libre', sans-serif;
    color-scheme: light dark;
    --text-color: black;
    --bg-color: hsl(0, 0%, 90%);
    --bg-color2: hsl(158, 80%, 80%);
    --accent: hsl(158, 71%, 32%);
    --accent2: hsl(113, 22%, 32%);
    --box-shadow: rgb(0 0 0 / 20%);
}

@media (prefers-color-scheme: dark) {
    :root {
    /* Dark theme */
    font-family: 'Proza Libre', sans-serif;
    --text-color: white;
    --bg-color: hsl(240, 15%, 13%);
    --bg-color2: hsl(267, 23%, 9%);
    --box-shadow: rgb(255 255 255 / 50%);
    }
}
body {
background-color: var(--bg-color);
scroll-behavior:smooth;
}

.flex-column {
display: flex;
flex-direction: column;
}
.flex-row {
display: flex;
flex-direction: row;
}

.flex-center {
justify-content:center;
}

.flex-align-center {
align-items: center;
}

.width-60em {
width: 60em;
max-width: 90vw;
}

.width-66 {
width: 66vw;
max-width: 90vw;
}
.navbox {
border: solid 1px;
border-radius: 4px;
color: var(--text-color);
box-shadow: 0 0 10px var(--box-shadow);
background-color: var(--bg-color2);
}

.navbox a:link:hover, .navbox a:visited:hover {
text-shadow: 2px 2px 9px var(--accent);
text-decoration: none;
color: var(--accent2);
}

.text-center {
text-align: center;
}
.padding-v2 {
padding-top: 2vh;
padding-bottom: 2vh;
}
.padding-v5 {
padding-top: 5vh;
padding-bottom: 5vh;
}